<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%   
String path = request.getContextPath();   
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";   
%> 
<!DOCTYPE html>
<html>
<head>
    <title>用户资料</title>
    <base href="<%=basePath%>"> 
    <link rel="shortcut icon" href="<%=basePath%>img/favo.ico">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/todc-bootstrap.css" rel="stylesheet">
    <link href="css/global.css" rel="stylesheet">
    <link href="css/layout.css" rel="stylesheet">
    <link href="css/datetimepicker.css" rel="stylesheet">
    <link href="css/user.css" rel="stylesheet">
    <link href="css/bootstrap-fileupload.min.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-fileupload.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
</head>
<style>
	.head-img{
		margin-left:45px;
		margin-top:40px;
	}
	.head-img .left{
		width:200px;
		float:left;
	}
	.head-img .rb{
		margin-top:30px;
	}
	.form-horizontal p,.head-img p{
		color:#666666;
	}
	#msgbox{
		padding: 10px 20px;
	}
</style>

<body>
<jsp:include page="include/topbar.jsp"></jsp:include>
<jsp:include page="include/logobar.jsp"></jsp:include>
<div class="layout grid-s5m0">
	<div class="col-sub">
		<h3>设置</h3>
		<ol class="unstyled">
			<li>
				<a href="user/info.html"><i class="icon-edit"></i>&nbsp;个人资料</a>
			</li>
			<li>
				<a href="user/head.html"><i class="icon-user"></i>&nbsp;修改头像</a>
			</li>
		</ol>
	</div>
	<div class="main-wrap">
		<div id="msgbox" class="box form-horizontal">
			<div class='form-title'>
				修改头像
			</div>
			<form enctype="multipart/form-data" action="user/uploadHead.html" method="post" onsubmit="return checkfile()">
				
			    <div class="fileupload fileupload-new" data-provides="fileupload" style="margin-left:45px;">
					<span class="btn btn-file"><span class="fileupload-new">上传头像</span>
					<span class="fileupload-exists">换一张</span>
					<input id="headfile" type="file" name="headImg"/></span>
					<span class="fileupload-preview"></span>
					<a href="#" class="close fileupload-exists" data-dismiss="fileupload" style="float: none">×</a>
					<button id="submit-btn" class="btn btn-success" style="margin-left:15px;">上传</button>
					<p>
						（支持gif、jpg、png图片格式，大小不要超过1.0M）
					</p>
					<p id="errormsg" style="color:red">
						${errormsg }
					</p>
				</div>
			</form>
			<div class="head-img">
				<div class="left">
					<c:if test="${sessionScope.user.headImg==null or sessionScope.user.headImg==''}">
						<img class="img-polaroid" alt="" src="img/default-head.jpg" height="160" width='160'>
					</c:if>
					<c:if test="${sessionScope.user.headImg!=null and sessionScope.user.headImg!=''}">
						<img class="img-polaroid" alt="" src="upload/head/${sessionScope.user.headImg}" height="160" width='160'>
					</c:if>
					<p>大尺寸头像:160x160</p>
				</div>
				<div class="right">
					<div class="rt">
						<c:if test="${sessionScope.user.headImg==null or sessionScope.user.headImg==''}">
							<img class="img-polaroid" alt="" src="img/default-head.jpg" height="50" width='50'>
						</c:if>
						<c:if test="${sessionScope.user.headImg!=null and sessionScope.user.headImg!=''}">
							<img class="img-polaroid" alt="" src="upload/head/${sessionScope.user.headImg}?s=50" height="50" width='50'>
						</c:if>
						<p>大尺寸头像:50x50</p>
					</div>
					<div class="rb">
						<c:if test="${sessionScope.user.headImg==null or sessionScope.user.headImg==''}">
							<img class="img-polaroid" alt="" src="img/default-head.jpg" height="24" width='24'>
						</c:if>
						<c:if test="${sessionScope.user.headImg!=null and sessionScope.user.headImg!=''}">
							<img class="img-polaroid" alt="" src="upload/head/${sessionScope.user.headImg}?s=24" height="24" width='24'>
						</c:if>
						<p>大尺寸头像:24x24</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

 
<script type="text/javascript">
function checkfile(){
	var path = $('#headfile').val();
	if(path ==''){
		$("#errormsg").html("请选择图片");
		return false;
	}
	var file=path;
	var filename=file.replace(/.*(\/|\\)/, "");
	var fileExt=(/[.]/.exec(filename)) ? /[^.]+$/.exec(filename.toLowerCase()) : '';

	if(fileExt=="jpg" || fileExt=="jpeg" || fileExt=="png" || fileExt=="gif"){
		return true;
	}else{
		$("#errormsg").html("图片格式不正确");
		return false;
	}

}
</script>
<jsp:include page="include/foot.jsp"></jsp:include>
</body>
</html>